<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>实践活动 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(to bottom, #fce4ec 0%, #fff3e0 100%);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(255,107,0,0.2);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .navbar-right {
            font-size: 18px;
            cursor: pointer;
        }
        
        /* 标签页切换 */
        .tab-bar {
            background: white;
            margin: 15px 15px 0;
            border-radius: 16px;
            padding: 5px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            display: flex;
            gap: 5px;
        }
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-radius: 12px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
        }
        
        .tab-item.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            font-weight: bold;
        }
        
        /* 筛选栏 */
        .filter-bar {
            background: white;
            margin: 15px;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .filter-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-tag {
            padding: 6px 12px;
            border-radius: 15px;
            background: #f0f2f5;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .filter-tag.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        /* 活动列表 */
        .activity-list {
            margin: 0 15px;
        }
        
        .activity-card {
            background: white;
            border-radius: 16px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .activity-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
        }
        
        .activity-banner {
            height: 180px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 48px;
            overflow: hidden;
        }
        
        .activity-banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .activity-banner-icon {
            position: relative;
            z-index: 2;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
        }
        
        .activity-status {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 5px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
        }
        
        .status-upcoming {
            background: rgba(255, 193, 7, 0.9);
            color: #856404;
        }
        
        .status-ongoing {
            background: rgba(40, 167, 69, 0.9);
            color: white;
        }
        
        .status-finished {
            background: rgba(108, 117, 125, 0.9);
            color: white;
        }
        
        .activity-content {
            padding: 20px;
        }
        
        .activity-header {
            margin-bottom: 15px;
        }
        
        .activity-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .activity-category {
            background: linear-gradient(135deg, #ff6b0020, #ffa72620);
            color: #ff6b00;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            display: inline-block;
        }
        
        .activity-details {
            margin-bottom: 15px;
        }
        
        .detail-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 13px;
            color: #666;
        }
        
        .detail-icon {
            font-size: 14px;
            width: 16px;
        }
        
        .activity-description {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .activity-progress {
            margin-bottom: 15px;
        }
        
        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .progress-text {
            font-size: 12px;
            color: #666;
        }
        
        .progress-ratio {
            font-size: 12px;
            color: #ff6b00;
            font-weight: bold;
        }
        
        .progress-bar {
            height: 6px;
            background: #f0f2f5;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff6b00, #ffa726);
            border-radius: 3px;
            transition: width 0.3s;
        }
        
        .activity-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border-radius: 20px;
            border: none;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
            text-align: center;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        .btn-secondary {
            background: #f0f2f5;
            color: #ff6b00;
        }
        
        .btn-disabled {
            background: #f0f2f5;
            color: #999;
            cursor: not-allowed;
        }
        
        .btn:hover:not(.btn-disabled) {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 我的活动 */
        .my-activities {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .view-all {
            color: #ff6b00;
            font-size: 12px;
            cursor: pointer;
        }
        
        .my-activity-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .my-activity-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .my-activity-item:hover {
            background: #e9ecef;
        }
        
        .my-activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: white;
            flex-shrink: 0;
        }
        
        .my-activity-info {
            flex: 1;
        }
        
        .my-activity-name {
            font-size: 13px;
            font-weight: bold;
            color: #333;
            margin-bottom: 2px;
        }
        
        .my-activity-time {
            font-size: 11px;
            color: #999;
        }
        
        .my-activity-status {
            padding: 3px 8px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: bold;
        }
        
        /* 快速报名 */
        .quick-join {
            position: fixed;
            bottom: 70px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .quick-join:hover {
            transform: scale(1.1);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
        
        /* 弹窗 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin: 20px;
            max-width: 300px;
            width: 100%;
            text-align: center;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .modal-message {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        
        .modal-actions {
            display: flex;
            gap: 10px;
        }
        
        .modal-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .modal-btn-cancel {
            background: #f0f2f5;
            color: #666;
        }
        
        .modal-btn-confirm {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">实践活动</span>
        </div>
        <div class="navbar-right" onclick="showActivityCalendar()">
            📅
        </div>
    </div>
    
    <!-- 标签页切换 -->
    <div class="tab-bar">
        <div class="tab-item active" onclick="switchTab(this, 'all')">全部活动</div>
        <div class="tab-item" onclick="switchTab(this, 'my')">我的活动</div>
        <div class="tab-item" onclick="switchTab(this, 'history')">历史记录</div>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <div class="filter-title">🏷️ 活动分类</div>
        <div class="filter-tags">
            <span class="filter-tag active">全部</span>
            <span class="filter-tag">文化活动</span>
            <span class="filter-tag">教育培训</span>
            <span class="filter-tag">健康义诊</span>
            <span class="filter-tag">环保行动</span>
            <span class="filter-tag">体育健身</span>
            <span class="filter-tag">科普宣传</span>
        </div>
    </div>
    
    <!-- 我的活动（当选中"我的活动"标签页时显示） -->
    <div class="my-activities" style="display: none;" id="myActivitiesSection">
        <div class="section-title">
            📋 我参与的活动
            <span class="view-all" onclick="showFullMyActivities()">查看全部</span>
        </div>
        <div class="my-activity-list">
            <div class="my-activity-item" onclick="viewActivityDetail(1)">
                <div class="my-activity-icon">🌱</div>
                <div class="my-activity-info">
                    <div class="my-activity-name">社区环保清洁行动</div>
                    <div class="my-activity-time">今天 14:00 - 文明实践中心</div>
                </div>
                <span class="my-activity-status status-ongoing">进行中</span>
            </div>
            <div class="my-activity-item" onclick="viewActivityDetail(2)">
                <div class="my-activity-icon">👴</div>
                <div class="my-activity-info">
                    <div class="my-activity-name">敬老院慰问活动</div>
                    <div class="my-activity-time">明天 09:00 - 阳光敬老院</div>
                </div>
                <span class="my-activity-status status-upcoming">即将开始</span>
            </div>
            <div class="my-activity-item" onclick="viewActivityDetail(3)">
                <div class="my-activity-icon">📚</div>
                <div class="my-activity-info">
                    <div class="my-activity-name">儿童阅读推广</div>
                    <div class="my-activity-time">上周六 - 社区图书馆</div>
                </div>
                <span class="my-activity-status status-finished">已完成</span>
            </div>
        </div>
    </div>
    
    <!-- 活动列表 -->
    <div class="activity-list" id="activityList">
        <div class="activity-card" onclick="viewActivityDetail(10)">
            <div class="activity-banner">
                <img src="img/贝雕博物馆.jpg" alt="贝雕博物馆开放日" class="activity-banner-image">
                <div class="activity-banner-icon">🏛️</div>
                <span class="activity-status status-upcoming">活动预告</span>
            </div>
            <div class="activity-content">
                <div class="activity-header">
                    <div class="activity-title">活动预告！北海市贝雕博物馆开放日来了，每月限量开放→速约!（第一期）</div>
                    <span class="activity-category">文化活动</span>
                </div>
                <div class="activity-details">
                    <div class="detail-item">
                        <span class="detail-icon">⏰</span>
                        <span>2025-11-15 09:00 - 17:00</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">📍</span>
                        <span>北海市贝雕博物馆</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">👥</span>
                        <span>限额参观 50 人</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">💰</span>
                        <span>获得积分：+30 分</span>
                    </div>
                </div>
                <div class="activity-description">
                    北海市贝雕博物馆每月限量开放参观活动，深入了解贝雕艺术的历史文化，欣赏精美的贝雕作品，感受传统工艺的魅力。名额有限，先到先得！
                </div>
                <div class="activity-progress">
                    <div class="progress-header">
                        <span class="progress-text">👥 预约进度</span>
                        <span class="progress-ratio">20/50</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 40%;"></div>
                    </div>
                </div>
                <div class="activity-actions">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); shareActivity(10)">分享</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinActivity(10, '北海市贝雕博物馆开放日')">立即预约</button>
                </div>
            </div>
        </div>
        
        <div class="activity-card" onclick="viewActivityDetail(11)">
            <div class="activity-banner">
                <img src="img/石榴结籽.jpg" alt="石榴结籽粽连心" class="activity-banner-image">
                <div class="activity-banner-icon">🫂</div>
                <span class="activity-status status-upcoming">民族团结</span>
            </div>
            <div class="activity-content">
                <div class="activity-header">
                    <div class="activity-title">【站站融通•文明365】石榴结籽粽连心，邻里融乐一家亲——2025年平安街社区民族团结主题活动</div>
                    <span class="activity-category">文化活动</span>
                </div>
                <div class="activity-details">
                    <div class="detail-item">
                        <span class="detail-icon">⏰</span>
                        <span>2025-11-10 14:00 - 17:00</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">📍</span>
                        <span>平安街社区新时代文明实践站</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">👥</span>
                        <span>招募参与者 80 人</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">💰</span>
                        <span>获得积分：+40 分</span>
                    </div>
                </div>
                <div class="activity-description">
                    以"石榴结籽粽连心"为主题的民族团结活动，通过包粽子、民族文化展示、邻里交流等形式，促进各民族居民之间的了解和友谊，共建和谐社区。
                </div>
                <div class="activity-progress">
                    <div class="progress-header">
                        <span class="progress-text">👥 报名进度</span>
                        <span class="progress-ratio">35/80</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 44%;"></div>
                    </div>
                </div>
                <div class="activity-actions">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); shareActivity(11)">分享</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinActivity(11, '民族团结主题活动')">报名参与</button>
                </div>
            </div>
        </div>
        
        <div class="activity-card" onclick="viewActivityDetail(12)">
            <div class="activity-banner">
                <img src="img/老龄化教育.jpg" alt="知老护老敬老" class="activity-banner-image">
                <div class="activity-banner-icon">👵</div>
                <span class="activity-status status-upcoming">敬老服务</span>
            </div>
            <div class="activity-content">
                <div class="activity-header">
                    <div class="activity-title">西藏路社区开展"知老・护老・敬老"老龄化教育暨中医惠老活动</div>
                    <span class="activity-category">健康义诊</span>
                </div>
                <div class="activity-details">
                    <div class="detail-item">
                        <span class="detail-icon">⏰</span>
                        <span>2025-11-08 09:00 - 12:00</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">📍</span>
                        <span>西藏路社区新时代文明实践站</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">👥</span>
                        <span>招募志愿者 25 人</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">💰</span>
                        <span>获得积分：+60 分</span>
                    </div>
                </div>
                <div class="activity-description">
                    开展老龄化健康教育和中医养生服务，为社区老年人提供健康咨询、中医理疗、养生指导等服务，提高老年人的健康意识和生活质量。
                </div>
                <div class="activity-progress">
                    <div class="progress-header">
                        <span class="progress-text">👥 报名进度</span>
                        <span class="progress-ratio">18/25</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 72%;"></div>
                    </div>
                </div>
                <div class="activity-actions">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); shareActivity(12)">分享</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinActivity(12, '老龄化教育暨中医惠老活动')">了解详情</button>
                </div>
            </div>
        </div>
        
        <div class="activity-card" onclick="viewActivityDetail(1)">
            <div class="activity-banner">
                <div class="activity-banner-icon">🌱</div>
                <span class="activity-status status-ongoing">进行中</span>
            </div>
            <div class="activity-content">
                <div class="activity-header">
                    <div class="activity-title">社区环保清洁行动</div>
                    <span class="activity-category">环保行动</span>
                </div>
                <div class="activity-details">
                    <div class="detail-item">
                        <span class="detail-icon">⏰</span>
                        <span>今天 14:00 - 17:00</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">📍</span>
                        <span>文明实践中心</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">👥</span>
                        <span>招募志愿者 30 人</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">💰</span>
                        <span>获得积分：+50 分</span>
                    </div>
                </div>
                <div class="activity-description">
                    为建设美丽社区，共同营造良好的生活环境，诚邀广大志愿者参与社区环保清洁行动。活动包括街道清扫、垃圾分类宣传、绿植养护等内容。
                </div>
                <div class="activity-progress">
                    <div class="progress-header">
                        <span class="progress-text">👥 报名进度</span>
                        <span class="progress-ratio">15/30</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 50%;"></div>
                    </div>
                </div>
                <div class="activity-actions">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); shareActivity(1)">分享</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinActivity(1, '社区环保清洁行动')">立即报名</button>
                </div>
            </div>
        </div>
        
        <div class="activity-card" onclick="viewActivityDetail(2)">
            <div class="activity-banner">
                👴
                <span class="activity-status status-upcoming">即将开始</span>
            </div>
            <div class="activity-content">
                <div class="activity-header">
                    <div class="activity-title">敬老院慰问活动</div>
                    <span class="activity-category">文化活动</span>
                </div>
                <div class="activity-details">
                    <div class="detail-item">
                        <span class="detail-icon">⏰</span>
                        <span>明天 09:00 - 12:00</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">📍</span>
                        <span>阳光敬老院</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">👥</span>
                        <span>招募志愿者 20 人</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">💰</span>
                        <span>获得积分：+80 分</span>
                    </div>
                </div>
                <div class="activity-description">
                    关爱老年人，传递温暖情怀。我们将为敬老院的老人们送去关怀和陪伴，包括健康体检、文艺表演、聊天陪伴等温馨活动。
                </div>
                <div class="activity-progress">
                    <div class="progress-header">
                        <span class="progress-text">👥 报名进度</span>
                        <span class="progress-ratio">8/20</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 40%;"></div>
                    </div>
                </div>
                <div class="activity-actions">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); shareActivity(2)">分享</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinActivity(2, '敬老院慰问活动')">立即报名</button>
                </div>
            </div>
        </div>
        
        <div class="activity-card" onclick="viewActivityDetail(3)">
            <div class="activity-banner">
                🏥
                <span class="activity-status status-upcoming">即将开始</span>
            </div>
            <div class="activity-content">
                <div class="activity-header">
                    <div class="activity-title">社区免费义诊活动</div>
                    <span class="activity-category">健康义诊</span>
                </div>
                <div class="activity-details">
                    <div class="detail-item">
                        <span class="detail-icon">⏰</span>
                        <span>本周六 08:00 - 16:00</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">📍</span>
                        <span>社区文化广场</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">👥</span>
                        <span>招募志愿者 15 人</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">💰</span>
                        <span>获得积分：+60 分</span>
                    </div>
                </div>
                <div class="activity-description">
                    邀请专业医护团队为社区居民提供免费健康体检、健康咨询、慢性病筛查等服务，普及健康知识，关爱社区居民身体健康。
                </div>
                <div class="activity-progress">
                    <div class="progress-header">
                        <span class="progress-text">👥 报名进度</span>
                        <span class="progress-ratio">12/15</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 80%;"></div>
                    </div>
                </div>
                <div class="activity-actions">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); shareActivity(3)">分享</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinActivity(3, '社区免费义诊活动')">立即报名</button>
                </div>
            </div>
        </div>
        
        <div class="activity-card" onclick="viewActivityDetail(4)">
            <div class="activity-banner">
                📚
                <span class="activity-status status-finished">已结束</span>
            </div>
            <div class="activity-content">
                <div class="activity-header">
                    <div class="activity-title">儿童阅读推广活动</div>
                    <span class="activity-category">教育培训</span>
                </div>
                <div class="activity-details">
                    <div class="detail-item">
                        <span class="detail-icon">⏰</span>
                        <span>上周六 14:00 - 17:00</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">📍</span>
                        <span>社区图书馆</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">👥</span>
                        <span>已完成 25 人参与</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">⭐</span>
                        <span>活动评分：4.8/5.0</span>
                    </div>
                </div>
                <div class="activity-description">
                    通过故事分享、亲子阅读、读书沙龙等形式，培养儿童阅读兴趣，提高阅读能力，营造良好的家庭阅读氛围。
                </div>
                <div class="activity-progress">
                    <div class="progress-header">
                        <span class="progress-text">✅ 活动已完成</span>
                        <span class="progress-ratio">25/25</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 100%;"></div>
                    </div>
                </div>
                <div class="activity-actions">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); shareActivity(4)">分享</button>
                    <button class="btn btn-disabled">活动已结束</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 快速报名按钮 -->
    <div class="quick-join" onclick="quickJoin()">
        ⚡
    </div>
    
    <!-- 报名确认弹窗 -->
    <div class="modal" id="joinModal">
        <div class="modal-content">
            <div class="modal-title">确认报名</div>
            <div class="modal-message" id="joinMessage"></div>
            <div class="modal-actions">
                <button class="modal-btn modal-btn-cancel" onclick="closeModal()">取消</button>
                <button class="modal-btn modal-btn-confirm" onclick="confirmJoin()">确认报名</button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item active">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item" onclick="location.href='profile.html'">
            <div class="nav-icon">👤</div>
            <div class="nav-label">我的</div>
        </div>
    </div>
    
    <script>
        let currentJoinActivity = null;
        
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 切换标签页
        function switchTab(element, tab) {
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.remove('active');
            });
            element.classList.add('active');
            
            const activityList = document.getElementById('activityList');
            const myActivitiesSection = document.getElementById('myActivitiesSection');
            
            if (tab === 'my') {
                activityList.style.display = 'none';
                myActivitiesSection.style.display = 'block';
            } else if (tab === 'history') {
                activityList.style.display = 'none';
                myActivitiesSection.style.display = 'block';
                // 这里可以加载历史记录数据
                alert('历史记录功能开发中...');
            } else {
                activityList.style.display = 'block';
                myActivitiesSection.style.display = 'none';
            }
        }
        
        // 筛选标签点击
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 查看活动详情
        function viewActivityDetail(id) {
            alert('查看活动详情 ID: ' + id + '\n\n功能开发中...\n将显示活动的详细信息、报名信息、参与者列表等');
        }
        
        // 报名活动
        function joinActivity(id, name) {
            currentJoinActivity = { id: id, name: name };
            document.getElementById('joinMessage').textContent = 
                `确定要报名参加"${name}"吗？\n\n报名成功后请按时参加活动，无故缺席将影响信用积分。`;
            document.getElementById('joinModal').style.display = 'flex';
        }
        
        // 确认报名
        function confirmJoin() {
            if (currentJoinActivity) {
                alert(`报名成功！\n\n活动：${currentJoinActivity.name}\n我们会在活动开始前通过短信提醒您。\n\n请您：\n• 准时参加活动\n• 遵守活动规则\n• 积极参与志愿服务`);
                currentJoinActivity = null;
            }
            closeModal();
        }
        
        // 关闭弹窗
        function closeModal() {
            document.getElementById('joinModal').style.display = 'none';
            currentJoinActivity = null;
        }
        
        // 分享活动
        function shareActivity(id) {
            if (navigator.share) {
                navigator.share({
                    title: '新时代文明实践智慧服务系统',
                    text: '快来参加这个有意义的志愿活动吧！',
                    url: window.location.href
                });
            } else {
                alert('分享功能：\n• 复制链接分享给好友\n• 分享到微信群\n• 分享到朋友圈\n\n功能开发中...');
            }
        }
        
        // 快速报名
        function quickJoin() {
            alert('🚀 快速报名\n\n为您推荐最适合的活动：\n• 根据您的兴趣爱好\n• 考虑您的空闲时间\n• 匹配您的技能特长\n\n功能开发中...');
        }
        
        // 显示活动日历
        function showActivityCalendar() {
            alert('📅 活动日历\n\n功能包括：\n• 月度活动一览\n• 我的活动安排\n• 重要活动提醒\n• 活动冲突检测\n\n功能开发中...');
        }
        
        // 查看完整我的活动
        function showFullMyActivities() {
            alert('我的活动完整记录：\n• 已报名活动\n• 参与历史\n• 获得积分\n• 活动评价\n\n功能开发中...');
        }
        
        // 阻止按钮事件冒泡
        document.querySelectorAll('.btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });
        
        // 阻止我的活动状态标签点击冒泡
        document.querySelectorAll('.my-activity-status').forEach(status => {
            status.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });
    </script>
</body>
</html>